<template>

	<view>
		<u-navbar :is-back="false" :title="title" :title-color="color" :background="background">
		</u-navbar>


		<view class="content" v-for="(item,index) in list" :key="index">
			<view class="top">
				<view class="title">
					<text>励志文章</text>
				</view>
			</view>

			<view class="middle">

				<view class="left">
					<image ref="../../../static/lizhi.jpg" src="../../../static/lizhi.jpg"></image>
				</view>

				<view class="right">
					<view class="right-up">
						<text>很多人都喜欢看一些图文并茂的励志文章，因为一篇文章图文并茂要比只有干巴巴的文字效果好很多。
							以下是为大家精心推荐的图文并茂的励志文章，希望你会喜欢。
						</text>
					</view>
					<view class="right-down">
						<!-- <view class="remark"> -->
						<text>百度文库</text>
						<!-- </view> -->
						<!-- <view class="author"> -->
						<text>何娅娟</text>
						<!-- </view> -->
					</view>
				</view>

			</view>

			<view class="down">
				<view class="shoucang">
					<u-icon name="heart" size="32"></u-icon>
				</view>
				<view class="dianzan">
					<u-icon name="thumb-up" size="32"></u-icon>
				</view>
				<view class="cai">
					<u-icon name="thumb-down" size="32"></u-icon>
				</view>
			</view>

		</view>
		<u-loadmore :status="status" />
	</view>




</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {

				// userList: store.state.userList
				list: 15,
				page: 0,
				status: 'loadmore',
				title: '我的',
				color: '#ffffff',
				background: {
					// backgroundColor: '#001f3f',

					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},

			}
		},

		onReady() {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},

		onLoad() {

		},

		onPullDownRefresh() {
			console.log("11111")
		},

		// 到达底部时触发
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.list += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},

		// computed和methods的区别为在<text class="age">{{getAge}}</text> 
		// 中使用方法getAge，computed不用添加括号，methods则需要添加括号getAge()
		computed: {},
		methods: {
			// ...mapGetters(['getAge'])
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			takePhoto: function() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.imgSrc = res.tempImagePath
					}
				});
			},
			error: function(e) {
				console.log(e.detail);
			},
			choooseImage: function(){
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						let filePath = res.tempFilePaths;
						if(filePath!=undefined) {
							let len = filePath.length;
							for(var x=0;x<len;x++) {
								 uni.saveFile({
								      tempFilePath: tempFilePaths[0],
								      success: function (res) {
								        var savedFilePath = res.savedFilePath;
								      }
								    });
								
							}
						}
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		// background-color: #007AFF;

		height: 100%;

		.top {
			.title {
				text-align: center;

				text {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.middle {
			margin: 0rpx 20rpx;
			border-radius: 10rpx;
			border: 1rpx solid #007AFF;
			box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.5);
			display: flex;

			.left {
				margin-right: 10rpx;

				image {
					width: 200rpx;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.right {

				height: 200rpx;

				.right-up {
					height: 160rpx;

					text {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
				}

				.right-down {
					text-align: right;
					margin-right: 10rpx;

					text {
						margin-left: 30rpx;
						font-size: 28rpx;
						font-weight: 1000;
					}
				}
			}
		}

		.down {
			display: flex;
			justify-content: flex-end;
			margin-right: 20rpx;
			margin-top: 10rpx;

			view {
				margin-left: 10rpx;
			}
		}
	}
</style>
